<template>
	<view>
    <xl-navbar title="规格部件" :fixed="true" :shadow="true"></xl-navbar>
    <xl-list-item title="基础使用" collapse arrow>
      <template #content>
        <xl-spec
          :specList="specList"
          :skuList="skuList"
          @change="handleChange"
        ></xl-spec>
      </template>
    </xl-list-item>
    <xl-list-item title="默认选中" collapse arrow>
      <template #content>
        <xl-spec
          :specList="specList"
          :skuList="skuList"
          :curSpec="['蓝色', 'XL码']"
          @change="handleChange"
        ></xl-spec>
      </template>
    </xl-list-item>
    <xl-list-item title="默认不选中" collapse arrow>
      <template #content>
        <xl-spec
          :specList="specList"
          :skuList="skuList"
          :defaultChoose="false"
          @change="handleChange"
        ></xl-spec>
      </template>
    </xl-list-item>
    <xl-list-item title="带图片" collapse arrow>
      <template #content>
        <xl-spec
          :specList="specList2"
          :skuList="skuList"
          @change="handleChange"
        ></xl-spec>
      </template>
    </xl-list-item>
	</view>
</template>

<script setup>
  import { ref } from 'vue'

  const specList = ref([
    { name: "颜色", values: ['黑色', '蓝色', '白色'] },
    { name: "尺码", values: ['L码', 'XL码'] },
  ])

  const specList2 = ref([
    {
      name: "颜色",
      values: [
        { value: '黑色', faceUrl: '/static/spec/black.png' },
        { value: '蓝色', faceUrl: '/static/spec/blue.png' },
        { value: '白色', faceUrl: '/static/spec/white.png' }
      ]
    },
    { name: "尺码", values: ['L码', 'XL码'] },
  ])

  const skuList = ref([
    { id: '1', spec: ['黑色', 'L码'], price: 44 },
    { id: '2', spec: ['黑色', 'XL码'], price: 45 },
    { id: '3', spec: ['蓝色', 'L码'], price: 46 },
    { id: '4', spec: ['蓝色', 'XL码'], price: 47 },
    { id: '5', spec: ['白色', 'XL码'], price: 48 },
  ])

  /**
   * 规格变化触发事件
   * @param {object}   spec
   * @param {array}    spec.value         - 当前选中的规格值,
   * @param {string}   spec.image         - 当前选中的规格图片,
   * @param {boolean}  spec.all           - 是否全选,
   * @param {boolean}  spec.none          - 是否未选,
   * @param {array}    spec.choose        - 已选规格名称列表
   * @param {array}    spec.unChoose      - 未选规格名称列表
   * @param {array}    spec.productList   - 已选规格产品列表
   * @param {object}   spec.product       - 规格全选时对应的产品对象
   */
  function handleChange(spec) {
    console.log(spec)
  }
</script>

<style lang="scss" scoped>
	
</style>